Bidzen | NFT Marketplace HTML Template

  • Version: 1.0.1
  • Last Updated: Junuary 05, 22
  • Author: themesflat
Thank you so much for your interests. Your comments and ratings would be much appreciated. If you purchase this template, you will get support. We will update this template time by time and we want to hear your wishes for the future updates or for complete new templates.
You need file Figma or images please contact
Email: helpdeskthemesflat@gmail.com
Skype id: helpdeskthemesflat
Create ticket id : https://themesflat.ticksy.com/ticket

Template features:

  • HTML5 & CSS3
  • Responsive Template
  • Animate everything you want
  • Free icons used
  • Pixel Perfect
  • Clean & Unique Design
  • Easy to customize
  • Retina Ready
  • Unlimited Colors
  • Home Page
  • Services Page
  • Service Detail
  • Price List
  • Parallax Effect
  • & much more...

HTML Structure

Bidzen | NFT Marketplace HTML Template

Below is Bidzen basic structure:

<!DOCTYPE html>
<div class="topbar"></div>
<head>
    <meta charset="utf-8">
    <title>Bidzen | NFT Marketplace HTML Template </title>

    <!-- Mobile Specific Metas -->

    <!-- Bootstrap  -->

    <!-- Theme Style -->

    <!-- Responsive -->

    <!-- colors -->    
   
    <!-- Animation Style -->    

    <!-- Favicon and touch icons  -->
</head>

<body>
	<!-- Header -->
    
    <!-- Connect Metamask -->
    <a id="connectbtn"> Wallet connect </a>


	<!-- tf-slider -->

    <section class="flat-row"> </section>
    <section class="tf-live-auctions"> </section>
    <section class="tf-latest-collections"> </section>
    <section class="tf-best-seller"> </section>
    <section class="tf-trendy-collections"> </section>
    <section class="tf-category"> </section>
    <section class="new-letter"> </section>


    <!-- Footer -->
    <footer class="footer"> </footer>

   	<!-- Bottom -->
   	<div class="bottom"> </bottom>

   	<!-- Go Top -->
    <a class="go-top">
     	<i class="fa fa-angle-up"></a>
    </a>
   
   <!-- Javascript -->
   <script type="text/javascript" src="assets/js/jquery.min.js"></script>
   <script type="text/javascript" src="assets/js/jquery.easing.js"></script>
   <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="assets/js/swiper-bundle.min.js"></script>
   <script type="text/javascript" src="assets/js/swiper.js"></script>
   <script type="text/javascript" src="assets/js/wow.min.js"></script>
   <script type="text/javascript" src="assets/js/plugin.js"></script>   
   <script type="text/javascript" src="assets/js/count-down.js"></script>      
   <script type="text/javascript" src="assets/js/shortcodes.js"></script>

   <!-- Connection Metamask -->
   <script type="text/javascript" src="assets/js/web3.min.js"></script>   
   <script type="text/javascript" src="assets/js/main.js"></script>      
   <script type="text/javascript" src="assets/js/nft.js"></script>                 

</body>

</html>

CSS System

The Bidzen CSS System contains 3 parts:
  • Template style
  • Shortcodes style
  • Responsive style
  • Javascript - Fonts - Animation - Bootstrap style

Style.css ( Template style )


/**
    * Reset Browsers
    * General
    * Elements
    * Forms
    * Typography
    * Extra classes
    * link style
    * Root
    * Header
    * Site Logo
    * Menu
    * Header Fixed
    * Pagination
    * Footer
    * Scroll Top
    * Widget
*/

Shortcodes.css ( Shortcodes - Elements style )

You can easily use the shortcodes to create your own page.


/**
    * Root
    * PreLoad
    * button
    * card article
    * blog details
    * new letter
    * author
    * Product Item 
    * category
    * wallet
    * heading
    * swiper
    * create item
    * login page
    * contact page
    * slider
    * author page
    * top seller page
    * hot collection page
    * creator page
    * auctions page
    * our latest page 
    * trendy collection 
    * best-seller
    * item detail
    * modal popup
*/

Javascript - Fonts - Animation - Bootstrap style

/**  
*	animate.css
*	bootstrap.css
*	jquery.fancybox.css
*	owl.carousel.css
*	wow.css
*   magnific-popup.css
*   icomoon.css
*   swiper-bundle.min.css
*/

Javascript Custom

Here you can modify any settings for ( Retina Logos, Animations, Testimonials, Sliders, & Progress bar and more..)

Main.js ( js/main.js )


/**
  * Dark Light Mode
  * Header Connect
  * Loadmore Item
  * headerFixed
  * retinaLogo
  * ajaxContactForm
  * mobileNav
  * ajaxSubscribe
  * alertBox
  * headerConnect
*/

Shortcodes System

You can easily use the shortcodes to create your own page.

    
/**
    * Root
    * PreLoad
    * button
    * card article
    * blog details
    * new letter
    * author
    * Product Item 
    * category
    * wallet
    * heading
    * swiper
    * create item
    * login page
    * contact page
    * slider
    * author page
    * top seller page
    * hot collection page
    * creator page
    * auctions page
    * our latest page 
    * trendy collection 
    * best-seller
    * item detail
    * modal popup
*/

Credits

How to add metamask

  • add id = connectbtn to button Wallet connect
  • import library js
    • assets/js/web3.min.js
    • assets/js/moralis.js
    • assets/js/nft.js

How to switcher Dark Light

Steps 1: Add Class is_active in body 

	<body class="body header-fixed is_dark" >
Steps 2: Add Class is_active in mode_switcher 

	<a href="#" class="light d-flex align-items-center is_active">